<template>
    <div>
        <div>
            <el-page-header @back="goBack" content="详情页面"></el-page-header>

        </div>

        <h2>商品详情界面</h2>
<!--        {{product}}-->
        <div class="wrapper">
            <div class="left">
                <img :src="getUrl(picPath)" alt="">
            </div>
            <div class="right">
                <div class="content">
                    <p>
                        <span>商品名称：</span>
                        <span>{{product.tbPrdInfo.labelName}}</span>
                    </p>
                    <p>
                        <span>商品描述：</span>
                        <span>{{product.tbPrdInfo.shortDesc}}</span>
                    </p>
                    <p>
                        <span>供应商：</span>
                        <span>{{product.tbPrdInfo.tbPrdExtend.supplierName}}</span>
                    </p>
                    <p>
                        <span>说明：</span>
                        <span>{{product.tbPrdInfo.tbPrdExtend.longDesc}}</span>
                    </p>
                    <p>
                        <span>重量：</span>
                        <span>{{product.tbPrdInfo.tbPrdExtend.weight}}</span>
                    </p>
                    <p>
                        <span>产地：</span>
                        <span>{{product.tbPrdInfo.tbPrdExtend.origin}}</span>
                    </p>
<!--                    <p>-->
<!--                        <span>售出数量：</span>-->
<!--                        <span>{{product.tbPrdInfo.tbPrdExtend.saledQty}}</span>-->
<!--                    </p>-->
                    <p>
                        <span>商品库存：</span>
                        <span>{{product.newStore}}</span>
                    </p>
                    <p>
                        <span>商品原价：</span>
                        <span>{{product.oldPrice}}</span>
                    </p>
                    <p>
                        <span>活动价格：</span>
                        <span style="color: red">{{product.newPrice}}</span>
                    </p>
                    <p>
                        <span>每人限购：</span>
                        <span>{{product.num}}</span>
                    </p>
                    <el-button type="primary" v-if="isTrue" @click="gotoBuy">购买</el-button>
                    <el-button type="primary" v-else @click="query">查询抢单状态</el-button>
                    <el-button type="primary" @click="queryCart">查看订单</el-button>
<!--                    <el-button type="primary" @click="clear">清楚定时器</el-button>-->
<!--                    <el-button-->
<!--                        type="primary"-->
<!--                        @click="openFullScreen2">-->
<!--                        服务方式-->
<!--                    </el-button>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ActivityContentOne",
        data(){
            return{
                pid: "",
                product: "",
                picPath: "1.jpg",
                value:"",
                title:"编辑手机信息",
                dialogFormVisible: false,
                formLabelWidth : "150px",
                phone1: sessionStorage.getItem('username'),
                // 定时器
                timer: null,
                // 展示的数据
                info: [],
                tbOrdInf: {
                    tid:'',
                    status:0,
                    payType:'支付宝',
                    payStatus:1,
                    accountId:'',
                    shippingName:'',// 收货人
                    shippingAddress:'',// 收货地址
                    shippingPhone:'',// 收货电话
                    postWay:'顺丰',
                    postFee:20.00,
                    totalPrice:'',
                    createBy:null,
                    updateBy:null,
                    updateDate:'',
                    remark:null,
                    version:0,
                    state:2
                },
                isTrue: true,

            }
        },
        created() {
            this.pid = this.$store.getters.getPid;
            this.getProduct();
            let accountId = sessionStorage.getItem("username");
            console.log(accountId)
            this.$http.post('product/address/findByTbid', {accountId: this.phone1}).then(data => {
                console.log("dizhi")
                console.log(data[0])
                this.tbOrdInf.shippingName = data[0].realName
                this.tbOrdInf.shippingAddress = data[0].realAddress
                this.tbOrdInf.shippingPhone = data[0].realPhone
            })
            // this.getInfo();
        },
        methods:{
            queryCart(){
                this.$router.push('/personalCenter')
            },
            getInfo() {
                //轮询获取更新过程中的信息
                if (this.timer) {
                    clearInterval(this.timer)
                } else {
                    this.timer = setInterval(() => {
                        // 在这里发送请求获取数据
                        let accountId = sessionStorage.getItem("username");
                        this.$http.post("product/seckill/selectSeckillStatusByUsername",{username:accountId}).then((res)=>{
                            console.log(res);
                        });

                    }, 1500);
                }
            },
            // 清除定时器的代码
            clear() {
                clearInterval(this.timer)
                this.timer = null
            },
            openFullScreen2() {

                // let accountId = sessionStorage.getItem("username");
                // this.$http.post("product/seckill/selectSeckillStatusByUsername",{username:accountId}).then((res)=>{
                //     console.log(res);
                // });
                // const loading = this.$loading({
                //     lock: true,
                //     text: 'Loading',
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                // });
                // setTimeout(() => {
                //     loading.close();
                // }, 3000);
            },
            goBack() {
                console.log('go back');
                this.$router.push("activityContent");
            },
            getProduct(){
                // let nowTime = "product_"+this.getNowTime();
                let nowTime = "product";
                // console.log(nowTime)
                this.$http.post("product/seckill/selectTbActInfByNowTimeAndPid",{time:nowTime,pid:this.pid}).then((res)=>{
                    console.log(res);
                    this.product = res;
                    this.picPath = this.product.tbPrdInfo.picPath;
                })
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/activity/findProductPicByPath?name=`+picPath;
            },
            // 获取日期格式
            getNowTime(){
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                if(month < 10){
                    month = "0"+month;
                }
                let day = date.getDate();
                if(day < 10){
                    day = "0"+day;
                }
                let hour = date.getHours();

                if(hour < 10){
                    hour = "0"+hour;
                }
                if(hour === 24){
                    day = day +1;
                    hour = "00";
                }
                let dateTime = year+month+day+hour;
                return dateTime;
            },
            // 弹出修改框，并且回填数据
            handleEdit(index, row) {
                this.dialogFormVisible= true;
                console.log(index, row);
                this.phone= {
                    id:row.id,
                    pno:row.pno,
                    pname:row.pname,
                    typeid:row.typeid,
                    price:row.price,
                    note:row.note,
                    createtime:row.createtime,

                }
                this.value = row.tType.tname;
            },
            // 清空表单
            resetForm() {
                this.dialogFormVisible=false;
                this.phone = {};
            },
            gotoBuy () {
                if (this.principal === null) {
                    this.$message({
                        type: 'info',
                        message: '请先登录!'
                    })
                    this.$router.push('/login')
                } else {
                    // tid	varchar	32		False		关联商品id
                    console.log("商品的id"+this.product.tbPrdInfo.tid);
                    // status	int	30		False		订单状态
                    let status = 0;
                    // pay_type	char	10		False		支付类型
                    let payType = "微信";
                    // pay_status	varchar	16		False		支付状态
                    let payStatus = 0;
                    // account_id	varchar	32		False		账户
                    let accountId = sessionStorage.getItem("username");

                    // console.log(this.product.newPrice);
                    let price = this.product.newPrice + this.tbOrdInf.postFee;

                    // console.log(price);
                    this.tbOrdInf.tid = this.product.tbPrdInfo.tid;
                    this.tbOrdInf.totalPrice = price;
                    this.tbOrdInf.accountId = sessionStorage.getItem('username');
                    // console.log(this.tbOrdInf);

                    // console.log(this.shoppingCart)
                    // 点击立即购买，生成订单
                    //   console.log(this.tbOrdInf.accountId)

                    this.$http.post('product/order/saveOrUpdate2',this.tbOrdInf).then();
                    this.isTrue = false;
                    this.getProduct();
                }
            },
            query(){
                this.getProduct();
                let accountId = sessionStorage.getItem("username");
                this.$http.post("product/seckill/selectSeckillStatusByUsername",{username:accountId}).then((res)=>{
                    console.log(res);
                    if(res.code === 1){
                        // console.log(res.data.msg)
                        this.$message({
                            type: 'info',
                            message: res.data.msg,
                        });
                        // sessionStorage.setItem("newPrice",this.product.newPrice);
                        // this.$router.push({path:"/activityorderDetails",query:{oid:res.data.oid}})
                    }else if(res.code === 0) {
                        this.$message({
                            type: 'info',
                            message: "抢单失败",
                        });
                    } else {
                        this.$message({
                            type: 'info',
                            message: res.data.msg,
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped>
    body{
        margin: 0px 0px;
        padding: 0px 0px;
    }
    .inputwidth{
        width: 80%;
    }
    .wrapper{
        width: 70%;
        height: 700px;
        border: 1px solid black;
        margin:auto;
        position: relative;
    }
    .wrapper .left{
        width: 45%;
        height: 500px;
        /*border: 1px solid black;*/
        display: inline-block;
        position: relative;
        bottom: 100px;
    }
    .wrapper .left img{
        width:100%;
        height: 500px;
        display: block;
    }
    .wrapper .right{
        width: 49%;
        height: 700px;
        /*border: 1px solid black;*/
        display: inline-block;
        position: relative;
        text-align: left;
    }
    .wrapper .right .content{
        width: 95%;
        height: 500px;
        /*border: 1px solid black;*/
        display: inline-block;
        position: absolute;
        margin-left: 50px;
        top: 100px;
    }
</style>
